import React from 'react'
import switchImg from './imgs/switch.svg'
import "./Journey.css"
export default function Journey(props) {
  // 取出数据
  const {
    from,
    to,
    exchangeFromTo,
    // showCitySelector 接受一个参数 为true 就是左边始发站 为false 就是终点站
    showCitySelector
  } = props
  return (
    <div className='journey'>
      <div
        className='journey-station'
        onClick={() => showCitySelector(true)}
      >
        <input className='journey-input journey-from'
          type="text"
          readOnly
          name='from'
          value={from}
        />

      </div>
      <div className='journey-switch' onClick={() => exchangeFromTo()}>
        <img src={switchImg} width="70" height="40" alt="switch" />
      </div>
      <div
        className='journey-station'
        onClick={() => showCitySelector(false)}
      >
        <input className='journey-input journey-from'
          type="text"
          readOnly
          name='from'
          value={to}
        />
      </div>
    </div>
  )
}